<template>
  <div class="leftOneLeftDiv">
    <div class="qixiangtitle">气象信息</div>
    <div class="qixiangboby">
      <div class="qixiangbobyleft">
        <div class="time">{{ time }}</div>
        <div class="schedule">{{ schedule }}</div>
        <div class="feisu">当前风速：<b>4级</b></div>
        <div class="fengx">风向：<b>南风</b></div>
        <div class="sd">
          <img src="@/assets/images/home/3d.png" alt="" />
        </div>
      </div>
      <div class="qixiangbobyright"></div>
    </div>
    <div class="qixiangfoot">
      <div class="qixiangfootming">
        <div class="qixiangfootmingz">明日气象监测：</div>
        <div class="qixiangfootmingy">
          <div class="tianqi">
            <p class="p1"></p>
            <p class="p2">多云转晴</p>
          </div>
          <div class="tianqi">
            <p class="p1"></p>
            <p class="p2">多云转晴</p>
          </div>
          <div class="tianqi">
            <p class="p1"></p>
            <p class="p2">多云转晴</p>
          </div>
        </div>
      </div>
      <div class="qixiangfootho">
        <div class="qixiangfootmingz">明日气象监测：</div>
        <div class="qixiangfootmingy">
          <div class="tianqi">
            <p class="p1"></p>
            <p class="p2">多云转晴</p>
          </div>
          <div class="tianqi">
            <p class="p1"></p>
            <p class="p2">多云转晴</p>
          </div>
          <div class="tianqi">
            <p class="p1"></p>
            <p class="p2">多云转晴</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.leftOneLeftDiv {
  .qixiangtitle {
    width: 509px;
    height: 40px;
    color: #58f7fd;
    font-size: 30px;
    padding-left: 50px;
    margin-top: 20px;
  }
  .qixiangboby {
    width: 509px;
    height: 293px;
    display: flex;
    margin-top: 60px;
    margin-left: 40px;

    .qixiangbobyleft {
      width: 250px;
      height: 250px;
      .time {
        font-size: 20px;
        color: #52b5f9;
      }
      .schedule {
        font-size: 15px;
        color: whitesmoke;
        font-weight: 500;
        margin-top: 33px;
      }
      .feisu {
        margin-left: 37px;
        margin-top: 40px;
        color: whitesmoke;
        font-size: 15px;
        b {
          color: #52b5f9;
          font-weight: 500;
          font-size: 38px;
          margin-left: 40px;
        }
      }
      .fengx {
        margin-left: 70px;
        margin-top: 45px;
        color: whitesmoke;
        font-size: 15px;
        b {
          color: #52b5f9;
          font-weight: 500;
          font-size: 20px;
          margin-left: 40px;
        }
      }
      .sd {
        width: 220px;
        height: 37px;
        margin-left: 22px;
        margin-top: 10px;
        img {
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 100%;
        }
      }
    }
    .qixiangbobyright {
      width: 200px;
      height: 250px;
    }
  }
  .qixiangfoot {
    width: 509px;
    height: 84px;
    margin-top: 15px;
    padding-left: 40px;
    .qixiangfootming {
      width: 509px;
      height: 42px;
      display: flex;
      .qixiangfootmingz {
        width: 115px;
        height: 42px;
        font-size: 15px;
        color: #49eefb;
        text-align: center;
        line-height: 42px;
      }
      .qixiangfootmingy {
        width: 225px;
        height: 42px;
        display: flex;
        .tianqi {
          width: 95px;
          height: 42px;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          .p1 {
            width: 27px;
            height: 28px;
            background: url("@/assets/images/home/widget5440@1x.png") no-repeat;
          }
          .p2 {
            width: 62px;
            height: 20px;
            font-size: 14px;
            line-height: 20px;
            color: #f2f2f2;
          }
        }
      }
    }
    .qixiangfootho {
      width: 509px;
      height: 42px;
      display: flex;
      .qixiangfootmingz {
        width: 115px;
        height: 42px;
        font-size: 15px;
        color: #49eefb;
        text-align: center;
        line-height: 42px;
      }
      .qixiangfootmingy {
        width: 225px;
        height: 42px;
        display: flex;
        .tianqi {
          width: 95px;
          height: 42px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .p1 {
            width: 27px;
            height: 28px;
            background: url("@/assets/images/home/widget5440@1x.png") no-repeat;
          }
          .p2 {
            width: 62px;
            height: 20px;

            font-size: 14px;

            color: #f2f2f2;
          }
        }
      }
    }
  }
}
</style>